<template>
  <div>
      <hr size="5px" color="red">
     <table class="table">
        <tr>
          <td></td>
          <td></td>
          <td class="loginandregister" >

          <!--   用if来进行登录状态的判断 -->
            <div v-if="!logging_status()">
            <router-link to="/login">登录</router-link>|
            <router-link to="/register">注册</router-link>
            </div>
            <div v-else>
               欢迎用户: [{{user}}]-----<span @click="loginout()">登出</span>
            </div>
            </td>
        </tr>
      </table>
      <hr size="4px" color="silver">

      <div class="title">
        <table>
          <tr>
            <td style="width:550px"><img :src=imgUrl alt="logo" class="img1" ></td>
             <td><el-input v-model="searchValue" placeholder="请输入内容" style="width:465px; height:32px;  margin:0px; padding:0px; line-height:30px;"></el-input> 
            <span class="search" @click="search(searchValue)">搜索</span></td>
            <td>
                <div class="nav">
                  <i class="el-icon-shopping-cart-2"></i>
                  <router-link to="/shoppingTrolley"> <span>我的购物车</span></router-link>
                </div>
            </td>
          </tr>
        </table>
      </div>
       <div class="line"></div>
            <el-menu
                  :default-active="activeIndex2"
                  class="el-menu-demo"
                  mode="horizontal"
                 
                  background-color="red"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                   
                  >

                   <el-submenu index="1" style="margin-left: 200px ;">
                    <template slot="title">书籍分类</template>
                    <template v-for=" item in  catlogList" >
                      <el-menu-item index="1-1" @click="tobooks(item.id)">{{item.catelogName}}</el-menu-item>
                    </template>
                  </el-submenu>

                  
                  <el-menu-item index="2" style="margin-left: 100px ;"><router-link to="index">首页</router-link></el-menu-item>
                  
                

                 <el-menu-item index="3" style="margin-left: 100px ;" > <router-link to="/books">  全部书籍 </router-link> </el-menu-item>
                  
                  <el-menu-item index="4" style="margin-left:100px;"><a href="" target="_blank">排行</a></el-menu-item>
            </el-menu>


            <div class="two">
                <table class="table1">
                  <tr>
                    <td class="two-left">  
                       <p style="font-size:22px">全部分类</p>
                      <li v-for=" item in catlogList" @click="getbooksdata(item.id)"><p class="title1">{{item.catelogName}}</p></li>
                    </td>
                    <td class="two-right" >

                      <li v-for=" item in bookList" @click="shoppingshow(item.id,item.catelogName)">
                     
                        <img  :src="'http://localhost:8080/BMS/'+item.imageUrl" alt=""> <p>{{item.productName}}</p>
                        
                      </li>  
                   
                    </td>  
                    
                  </tr>
                     
                </table>
                
            </div>
  </div>
</template>

<script>
export default {
  name:'books',
  data(){
    return{
     
      //搜索
        searchValue:'',

        imgUrl: require('../../assets/images/logo.jpg'),
         activeIndex: '2',
      activeIndex2: '1',
      bookList:[{
        id:'',
        catlogId:'',
        productName:'',
        price:'',
        spec:'',
        stockQty:'',
        refPrice:'',
        imageUrl:'',
        shelfStatu:'',
        catelogName:''

      }],
      catlogList:[{
        id:'',
        proId:'',
        catelogCode:'',
        catelogName:'',

      }]


    }
  },
  mounted(){
    this.logging_status()
    this.getcatlogData()
   this.getbookcatelog()
   var id=this.$route.params.id
   console.log(id)
   this.getbooksdata(id)
  }
  ,
  methods:{
    
        logging_status:function(){
        if(localStorage.getItem("user")!=null){
         this.user=localStorage.getItem("user");
          return true
          
        }
        else{
          return false
        }
        
      },
      loginout:function(){
        localStorage.removeItem("user");
        localStorage.removeItem("userId");
         this.user=localStorage.getItem("user");
            this.$router.go(0)
        alert("退出登录");
      },
      getcatlogData:function(){
        this.$axios.get("/catlog/getcatlogs").then(res=>{
              this.catlogList=res.data
              console.log(this.catlogList)
        })
      },
      getbooksdata:function(id){
        this.$axios.get("/product/allbooks",{params:{id:id}}).then(res=>{
          this.bookList=res.data
          this.bookList2=res.data
        })
      },
      getbookcatelog:function(){
          var id=this.$route.params.id;
          this.$axios.get("/product/allbooks",{params:{id:id}}).then(res=>{
            this.bookList=res.data
          })
      }
      
      
      ,
      shoppingshow:function(id,catelogName){
        console.log(id)
        console.log(catelogName)
        this.$router.push({
          name:'shoppingShow',
          params:{id:id,catelogName:catelogName}

        })
      },
      
      tobooks:function(id){
        
          this.$axios.get("/product/allbooks",{params:{id:id}}).then(res=>{
            this.bookList=res.data
          })
      },
      
     //搜索
     search:function(searchValue){
       this.$router.push({
         name:'searchShow',
         params:{searchValue}
       })
     }


  }
}
</script>

<style scoped>
a{
  text-decoration: none;
}
.table{
  width: 100%;
  height: 50px;
  color: #000;
  background-color: rgb(238, 231, 231);
  
}

.loginandregister{
  float: right;
  line-height: 50px;
  margin-right:10px ;
}
.img1{
  width: 80%;
  height: 150px;
  float: left;
}
.search{
  margin-left: -4.5px;
  display: inline-block;
  background-color: #ca151e;
   width: 50px;
   height: 36px;
   line-height: 32px;
   position: relative;
   top: -1px;
}
.nav{
  width: 120px;
  height: 40px;
  margin-left: 120px ;
  line-height: 40px;
  background-color: red;
}

.two{
  width: 100%;
  height: 100%;
}
.table1{
  width: 100%;
  height: 100%;
}
.two-left{
  display: inline-block;
  width: 15%;
  height:720px;
   background-color: #868383;
}
.two  tr {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 251, 251);
}
.two-right{
   display: inline-block;
  width: 85%;
  height: 720px;
   background-color:rgb(235, 229, 229);
}
li{
  list-style: none;
}
.two-right li{
  width: 50%;
  
  float: left;
  position: relative;
  top: 4%;
  left: -5%;
  margin-bottom: 2%;
}
.two-right img{
 
  width: 200px;
  height: 220px;
}
.title1{
  font-size: 22px;
  margin-top: 5%;
}
</style>